* {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

.center {
  width: 1000px;
  margin: 0 auto;
}

body {
  background-color: #fff;
}

.nav .area {
  display: flex;
  align-items: center;
}

.nav .area ul {
  width: 850px;
  display: flex;
  justify-content: space-between;
}

.nav .area ul li {
  width: 70px;
  padding: 10px;
  margin: 10px;
  text-align: center;
}

.nav .area ul li > div {
  width: 33px;
  height: 45px;
  margin: 0 auto;
}

.nav .area ul li a {
  user-select: none;
  color: #000;
}

.nav .area ul li:nth-child(1) > div {
  background: url('../icon.png');
  background-repeat: no-repeat;
}

.nav .area ul li:nth-child(2) > div {
  background: url('../icon.png') no-repeat -200px 0;
}

.nav .area ul li:nth-child(3) > div {
  background: url('../icon.png') no-repeat -200px 0;
}

.nav .area ul li:nth-child(4) > div {
  background: url('../icon.png') no-repeat -300px 0;
}

.nav .area ul li:nth-child(5) > div {
  background: url('../icon.png') no-repeat -400px 0;
}

.nav .area ul li:nth-child(6) > div {
  background: url('../icon.png') no-repeat -500px 0;
}

.nav .area ul li:nth-child(7) > div {
  background: url('../icon.png') no-repeat -565px 0;
}

.nav .area ul li:nth-child(8) > div {
  background: url('../icon.png') no-repeat -565px 0;
}

.nav .area > ul > li.active {
  background-color: #008aff;
}

.nav .area > ul > li.active > a {
  color: #fff;
}

.nav .area ul li.active:nth-child(1) > div {
  background: url('../icon.png') no-repeat 0 -97px;
}

.nav .area ul li.active:nth-child(2) > div {
  background: url('../icon.png') no-repeat -200px -97px;
}

.nav .area ul li.active:nth-child(3) > div {
  background: url('../icon.png') no-repeat -200px -97px;
}

.nav .area ul li.active:nth-child(4) > div {
  background: url('../icon.png') no-repeat -300px -97px;
}

.nav .area ul li.active:nth-child(5) > div {
  background: url('../icon.png') no-repeat -400px -97px;
}

.nav .area ul li.active:nth-child(6) > div {
  background: url('../icon.png') no-repeat -500px -97px;
}

.nav .area ul li.active:nth-child(7) > div {
  background: url('../icon.png') no-repeat -565px -97px;
}

.nav .area ul li.active:nth-child(8) > div {
  background: url('../icon.png') no-repeat -565px -97px;
}
